<template>
  <div>
    <el-table :data="applications" style="width: 100%" border>
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="申请人" width="120" />
      <el-table-column prop="phone" label="联系电话" width="150" />
      <el-table-column prop="createTime" label="申请日期" width="200" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag
            :type="scope.row.status === 1 ? 'success' : (scope.row.status === '2' ? 'danger' : 'warning')">
            {{ scope.row.status === 1 ? "已通过" : (scope.row.status === "2" ? "已拒绝" : "待审核") }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="申请理由" />
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="handleReview(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 申请详情对话框 -->
    <el-dialog v-model="applicationDetailVisible" title="入会申请详情"
      width="60%" top="5vh" append-to-body>
      <el-descriptions v-if="currentApplication" :column="2" border>
        <el-descriptions-item label="申请状态">
          <el-tag
            :type="currentApplication.status === 1 ? 'success' : (currentApplication.status === '2' ? 'danger' : 'warning')">
            {{ currentApplication.status === 1 ? "已通过" : (currentApplication.status === "2" ? "已拒绝" : "待审核") }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请时间">{{ currentApplication.createTime }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ currentApplication.name }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ currentApplication.gender }}</el-descriptions-item>
        <el-descriptions-item label="出生年月">{{ currentApplication.birthDate }}</el-descriptions-item>
        <el-descriptions-item label="籍贯">{{ currentApplication.nativePlace }}</el-descriptions-item>
        <el-descriptions-item label="民族">{{ currentApplication.ethnicity }}</el-descriptions-item>
        <el-descriptions-item label="文化程度">{{ currentApplication.education }}</el-descriptions-item>
        <el-descriptions-item label="政治面貌">{{ currentApplication.politicalStatus }}</el-descriptions-item>
        <el-descriptions-item label="专长">{{ currentApplication.specialty }}</el-descriptions-item>
        <el-descriptions-item label="推荐人">{{ currentApplication.recommender }}</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{ currentApplication.phone }}</el-descriptions-item>
        <el-descriptions-item label="身份证号码">{{ currentApplication.idCard }}</el-descriptions-item>
        <el-descriptions-item label="通讯地址">{{ currentApplication.address }}</el-descriptions-item>
        <el-descriptions-item label="会员类型">
          {{ {
            'A': '文史会员',
            'B': '联盟成员',
            'C': '联盟企业'
          }[currentApplication.memberType] }}
        </el-descriptions-item>
        <el-descriptions-item label="拟任职务" v-if="currentApplication.memberType === 'A'">
          {{ currentApplication.proposedPosition }}
        </el-descriptions-item>
        <template v-if="currentApplication.memberType === 'B' || currentApplication.memberType === 'C'">
          <el-descriptions-item label="企业名称">{{ currentApplication.companyName }}</el-descriptions-item>
          <el-descriptions-item label="职务">{{ currentApplication.position }}</el-descriptions-item>
          <el-descriptions-item label="注册资金">{{ currentApplication.registeredCapital }}万元</el-descriptions-item>
          <el-descriptions-item label="企业地址">{{ currentApplication.companyAddress }}</el-descriptions-item>
          <el-descriptions-item label="经营范围" :span="2">{{ currentApplication.businessScope }}</el-descriptions-item>
        </template>
        <el-descriptions-item label="缴费金额">{{ currentApplication.paymentAmount }}元</el-descriptions-item>
        <el-descriptions-item label="缴费时间">{{ currentApplication.paymentTime }}</el-descriptions-item>
      </el-descriptions>

      <div class="image-preview" v-if="currentApplication">
        <div class="preview-item">
          <h4>个人照片</h4>
          <el-image :src="currentApplication.photoUrl" :preview-src-list="[currentApplication.photoUrl]" fit="cover"
            style="width: 100px; height: 100px" />
        </div>
        <div class="preview-item">
          <h4>支付凭证</h4>
          <el-image :src="currentApplication.paymentProofUrl" :preview-src-list="[currentApplication.paymentProofUrl]"
            fit="cover" style="width: 100px; height: 100px" />
        </div>
      </div>

      <div v-if="currentApplication?.status === 0" class="review-form">
        <el-divider>审核意见</el-divider>
        <el-form :model="reviewForm" label-width="100px">
          <el-form-item label="审核备注">
            <el-input v-model="reviewForm.reason" type="textarea" :rows="3" placeholder="请输入审核意见" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <template v-if="currentApplication?.status === 0">
            <el-button @click="applicationDetailVisible = false">取消</el-button>
            <el-button type="danger" @click="handleReject(currentApplication.id)">拒绝</el-button>
            <el-button type="primary" @click="handleApprove(currentApplication.id)">通过</el-button>
          </template>
          <template v-else>
            <el-button @click="applicationDetailVisible = false">关闭</el-button>
          </template>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ClanMemberAPI from "@/api/clanMember/clanMember"

const props = defineProps({
  members: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:applications', 'update:members'])

// 入会申请
const applications = ref([
  {
    id: 1,
    name: '郑一',
    gender: '男',
    birthDate: '1990-01-01',
    nativePlace: '江西省上饶市',
    ethnicity: '汉族',
    education: '本科',
    politicalStatus: '群众',
    specialty: '企业管理',
    recommender: '李四',
    phone: '13900139001',
    idCard: '360123199001011234',
    address: '江西省上饶市信州区',
    memberType: 'A',
    proposedPosition: '会员',
    paymentAmount: 500,
    paymentTime: '2023-05-01',
    paymentProofUrl: '/path/to/proof1.jpg',
    photoUrl: '/path/to/photo1.jpg',
    reason: '祖籍在此，希望加入宗亲会了解家族历史',
    status: '待审核',
    createTime: '2023-05-01'
  },
  {
    id: 2,
    name: '郑二',
    gender: '女',
    birthDate: '1985-06-15',
    nativePlace: '江西省上饶市',
    ethnicity: '汉族',
    education: '硕士',
    politicalStatus: '中共党员',
    specialty: '金融投资',
    recommender: '王五',
    phone: '13900139002',
    idCard: '360123198506151234',
    address: '江西省上饶市广信区',
    memberType: 'B',
    companyName: '上饶投资有限公司',
    position: '总经理',
    registeredCapital: 1000,
    companyAddress: '江西省上饶市广信区某某路123号',
    businessScope: '投资管理、资产管理、企业管理咨询',
    paymentAmount: 1000,
    paymentTime: '2023-04-15',
    paymentProofUrl: '/path/to/proof2.jpg',
    photoUrl: '/path/to/photo2.jpg',
    reason: '寻根问祖，希望能与宗亲们交流',
    status: '已通过',
    createTime: '2023-04-15'
  }
])

// 申请管理方法
const applicationDetailVisible = ref(false)
const currentApplication = ref(null)
const reviewForm = ref({
  reason: ''
})

// 审核申请
const handleReview = (row) => {
  currentApplication.value = row
  reviewForm.value.reason = ''
  applicationDetailVisible.value = true
}

// 通过申请
const handleApprove = (id) => {
  if (reviewForm.value.reason === '') {
    ElMessage.warning('审核意见不能为空')
    return
  }
  const application = applications.value.find(item => item.id === id)
  if (!application) return
  ElMessageBox.confirm(
    `确定通过 ${application.name} 的入会申请吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  ).then(() => {
    ClanMemberAPI.doAudit({
      id: id,
      status: 1,
      reason: reviewForm.value.reason
    }).then(res => {
      ElMessage.success('已通过申请')
      applicationDetailVisible.value = false
      getApplicationList();
    })
  }).catch(() => { })
}
// 拒绝申请
const handleReject = (id) => {
  const application = applications.value.find(item => item.id === id)
  if (!application) return
  ElMessageBox.confirm(
    `确定拒绝 ${application.name} 的入会申请吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    ClanMemberAPI.doAudit({
      id: id,
      status: 2,
      reason: reviewForm.value.reason
    }).then(res => {
      ElMessage.success('已拒绝申请')
      applicationDetailVisible.value = false
      getApplicationList();
    })
  }).catch(() => { })
}

// 获取入会申请列表
const getApplicationList = () => {
  ClanMemberAPI.getApplicationList().then(res => {
    applications.value = res.list
    console.log(res.list)
  })
}
getApplicationList();
</script>

<style scoped>
.image-preview {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.preview-item {
  text-align: center;
}

.preview-item h4 {
  margin-bottom: 10px;
}

.review-form {
  margin-top: 20px;
}
</style> 